<template>
  <div class="page-container">
    <div class="in-container">
      <AppSearchForm @submit="search" @reset="reset">
        <el-form-item>
          <el-input
            v-model="state.query.name"
            clearable
            placeholder="输入描述内容模糊搜索"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="state.query.date"
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
      </AppSearchForm>
      <AppPageTable
        stripe
        :data="state.tableData.data"
        @change="getList"
        :autostyle="'height: calc(100% - 41px);'"
        :option="state.tableData.option"
        class="table"
      >
        <el-table-column type="expand">
          <template #default="scope">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="请求参数">
                <span>{{ scope.row.requestParameters }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="createBy" label="用户名" />
        <el-table-column prop="requestIp" label="IP" />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="ipAddress"
          label="IP来源"
        />
        <el-table-column prop="description" label="描述" />
        <el-table-column
          prop="executionDuration"
          label="请求耗时"
          align="center"
        >
          <template #default="scope">
            <el-tag v-if="scope.row.executionDuration <= 200" type="success"
              >{{ scope.row.executionDuration }}ms</el-tag
            >
            <el-tag v-else-if="scope.row.executionDuration <= 500"
              >{{ scope.row.executionDuration }}ms</el-tag
            >
            <el-tag
              v-else-if="scope.row.executionDuration <= 1000"
              type="warning"
              >{{ scope.row.executionDuration }}ms</el-tag
            >
            <el-tag v-else type="danger"
              >{{ scope.row.executionDuration }}ms</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="operatingSystem" label="操作系统" />
        <el-table-column prop="deviceType" label="设备类型" />
        <el-table-column prop="browserName" label="浏览器" />
        <el-table-column prop="version" label="版本号" />
        <el-table-column prop="area" label="区域" />
        <el-table-column prop="controller" label="控制器" />
        <el-table-column prop="action" label="方法名称" />
        <el-table-column prop="method" label="请求类型" />
        <el-table-column prop="createTime" label="创建日期" width="180px">
          <template #default="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
      </AppPageTable>
    </div>
  </div>
</template>

<script setup>
import { defineComponent, reactive, onMounted, ref } from "vue";
import AppSearchForm from "@/components/AppSearchForm.vue";
import AppTitleBox from "@/components/AppTitleBox.vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
import dayjs from "dayjs";
import request from "@/public/request";
import { ElMessage } from "element-plus";

const state = reactive({
  //查询数据
  query: {
    name: "",
    date: [],
  },
  //表格数据
  tableData: {
    data: [],
    option: useTableOption(),
  },
});

// 设置时间格式
const parseTime = (data) => {
  return dayjs(data).format("YYYY-MM-DD HH:mm:ss");
};
// 搜索点击
const search = () => {
  state.tableData.option.page = 1;
  getList();
};
// 重置点击
const reset = () => {
  state.query = {
    name: "",
    date: [],
  };
  state.tableData.option.page = 1;
  search();
};
// 获取表格数据
const getList = async () => {
  let url = "/api/auditing/query";
  if (state.query.date && state.query.date.length > 0) {
    state.query.date[0] = dayjs(state.query.date[0]).format(
      "YYYY-MM-DD HH:mm:ss"
    );
    state.query.date[1] = dayjs(state.query.date[1])
      .add(1, "day")
      .subtract(1, "second")
      .format("YYYY-MM-DD HH:mm:ss");
    url =
      url +
      `?CreateTime=${state.query.date[0]}&CreateTime=${state.query.date[1]}`;
  }
  state.tableData.option.loading = true;
  try{
    let res = await request.get(url, {
      PageIndex: state.tableData.option.page,
      PageSize: state.tableData.option.pageSize,
      KeyWords: state.query.name,
    });
    state.tableData.data = res.content;
    state.tableData.option.total = res.totalElements;
  }catch(e){
    ElMessage.error("表格数据请求失败");
  }
  state.tableData.option.loading = false;
};

onMounted(() => {
  search();
});
</script>

<style lang="scss" scoped></style>
